<template>
  <li class="comment fx cs" @mouseenter="showRemove" @mouseleave="showRemove">
    <img class="br-5 cs" :src="comment.avatar" alt="" />
    <div class="ct b-c">
      <div class="top fx">
        <div class="msg">
          <span class="username">{{ comment.username }}</span>
          <span class="job">{{ comment.job }}</span>
        </div>
      </div>
      <div class="content" v-html="comment.content"></div>
      <div class="bot fx">
        <div class="time-remove">
          <span class="time"> {{ comment.time }} </span>
          <span
            class="remove cs"
            :class="{ show: isShow }"
            @click="removeComment"
            v-if="comment.commentUserId === user._id"
          >
            · 删除
          </span>
        </div>
        <div class="right fx cs">
          <a-icon type="like"></a-icon>
          <div class="reply"><a-icon type="message"></a-icon> 回复</div>
        </div>
      </div>
    </div>
  </li>
</template>

<script>
import { mapState } from "vuex";
import { removeComment } from "@/api/article";
export default {
  name: "Comment",
  props: {
    comment: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    showRemove() {
      this.isShow = !this.isShow;
    },
    async removeComment() {
      const articleId = this.comment.articleId;
      const UserId = this.user._id;
      const commentUserId = this.comment.commentUserId;
      const id = this.comment.rawTime;
      if (!UserId) {
        this.$message.error("还没有登录哦，请先登录");
      } else if (UserId !== commentUserId) {
        this.$message.error("您没有权限删除该评论");
      } else {
        const r = await removeComment({ articleId, id });
        if (r.code == 1) {
          this.$message.success(r.msg);
          //   重新获取评论
          this.$bus.$emit("getData");
        } else {
          this.$message.error(r.msg);
        }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.comment {
  width: 55rem;
  margin-top: 2rem;
  img {
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
  }
  .ct {
    padding-bottom: 2rem;
    .top {
      .msg {
        .job {
          margin-left: 1rem;
          color: #8a9aa9;
        }
      }
    }
    .content {
      width: 46rem;
      line-height: 1.5;
      margin: 1rem 0;
    }
    .bot {
      justify-content: space-between;
      width: 46rem;
      color: #8a9aa9;
      .right {
        .reply {
          margin-left: 2rem;
        }
      }
      .remove {
        display: none;
        &.show {
          display: inline-block;
        }
      }
    }
  }
}
</style>